import React, { Component } from 'react'
import Test from './Test'
// 非受控组件: 其实就是学习如何获取真实dom

// 1. document.querySelector....
// 2. e.target 只能获取事件目标

// 创建ref对象
const xxx = React.createRef()
console.log(xxx)
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 当input的真实dom创建完毕之后,react会自动将input真实dom的地址赋值给ref对象的current属性 */}
        <input type="text" ref={xxx} />
        {/* 注意: 一个ref对象只能和一个标签或组件进行绑定 */}
        <input type="checkbox" ref={xxx} />
        {/* ref对象和类组件绑定,获取到的是组件的实例. 注意: 不能和函数组件绑定,会警告 */}
        <Test ref={xxx}></Test>
        <button
          onClick={(e) => {
            //点击按钮让文本框获取焦点
            console.log(xxx)
          }}
        >
          按钮
        </button>
      </div>
    )
  }
}
